<template>
  <div class="content-list">
    <div class="menu-box" v-for="item in tabList" :key="item.id" :style="!item.isShow && { marginBottom: 0 }">
      <div class="menu-item" v-if="item.isShow">
        <router-link
          @click="toPage(item.id)"
          class="item"
          :to="{ name: route.meta.loopType ? item.linkLoop : item.link }"
        >
          <div
            class="item-name"
            :style="store.isMobileType && { textDecoration: 'none' }"
            :class="{ 'item-active': route.name === item.link || route.name === item.linkLoop }"
            @click="toHome(item.id)"
          >
            <span>{{ item.name }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template> 

<script lang="ts">
export default defineComponent({
  name: 'RouterList',
});
</script>
 
<script setup lang="ts">
import iconTab from '@/freeComponents/freeIconComponent/footerIcon.vue';
import { computed, defineComponent, nextTick, ref, watch } from 'vue';
import { urls } from '@/utils/request/upload';
import { commonDataStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';

const emit = defineEmits(['emitPath']);
const route = useRoute();
const store = useProjectStore();
const commonStore = commonDataStore();
const { tabvalue } = storeToRefs(store);
// commonStore.getMenuList();

const props = defineProps({
  info: {
    type: Object,
  },
});
// console.log(commonStore.menuList, '获取列表');
const tabList = ref([
  { name: '展览首页', isShow: true, id: 0, link: 'templateedit', linkLoop: 'exhibitionHome', icon: '\ue622' },
  { name: '展品图库', isShow: true, id: 1, link: 'templateExhibit', linkLoop: 'templateExhibitLoop', icon: '\ue627' },
  { name: '文创商品', isShow: true, id: 4, link: 'templateCultural', linkLoop: 'templateCulturalLoop', icon: '\ue623' },
  {
    name: '版权声明',
    isShow: true,
    id: 5,
    link: 'templateCopyright',
    linkLoop: 'templateCopyrightLoop',
    icon: '\ue626',
  },
  {
    name: '学术研究',
    isShow: true,
    id: 3,
    link: 'templateResearches',
    linkLoop: 'templateResearchesLoop',
    icon: '\ue624',
  },
  { name: '策展团队', isShow: true, id: 6, link: 'templateTeam', linkLoop: 'templateTeamLoop', icon: '\ue721' },
  { name: '全景展厅', isShow: true, id: 7, link: '', linkLoop: '', icon: '\ue639' },
  { name: '留言板', isShow: true, id: 2, link: 'templateMessage', linkLoop: 'templateMessageLoop', icon: '\ue625' },
]);

const initSetting = async () => {
  try {
    const isMobile = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    );

    nextTick(() => {
      if (isMobile) {
        tabList.value[7].isShow = false;
      }

      if (!commonStore.digitalShowroom) {
        tabList.value[6].isShow = false;
      }
      commonStore.menuList.forEach((element) => {
        console.log(element.type);

        if (!element.config) {
          switch (element.type) {
            case 2:
              tabList.value[7].isShow = false;
              break;
            case 3:
              tabList.value[4].isShow = false;
              break;
            case 4:
              tabList.value[2].isShow = false;
              break;
            case 6:
              tabList.value[5].isShow = false;
              break;
          }
        }
      });
    });
    // console.log(tabList.value);
  } catch {}
};
commonStore.getMenuList();
initSetting();

// 回到首页
const toHome = (i: number) => {
  emit('emitPath');
  store.menuId = i;

  if (i == 7) {
    window.open(commonStore.digitalShowroom, '_blank');
  }
  if (i == 0) {
    store.bannerShow = false;
    store.bannerLock = false;

    setTimeout(() => {
      const el = document.getElementById('edit-scroll-box');
      el.scrollLeft = 0;
    }, 300);
  }
};

const toPage = (i: number) => {
  emit('emitPath');
  if (i == 7) {
    window.open(commonStore.digitalShowroom, '_blank');
  }
};
</script>   

<style scoped lang="less">
.content-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.menu-box {
  width: 100%;
  &:last-child {
    margin-bottom: 0;
  }
}
.menu-item {
  width: 100%;
  height: 40px;
}
.item-active {
  background: url('https://static.jiyi.show/free/style16/listhover2.png') no-repeat center/100% 100%;
  span {
    color: #333;
  }
  i {
    color: #333;
  }
}
.item {
  width: 100%;
  display: flex;
  align-items: center;
  color: #777;
  &:hover {
    .item-name {
      color: #663e30;
      span {
        text-decoration-line: underline;
      }
    }
  }
  .item-name {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-family: SourceHanSerifCN;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>